<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,body,ul,ol{padding:0;margin:0;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.tc{text-align: center;}
.fl{float: left;}
.fr{float: right;}
.clear:after{content:"";clear:both;}
.clear:before,.clear:after{display:table;}
.layout{width:1000px;margin:0 auto;}
a{text-decoration: none;}

.lbox{width:350px;}
.rbox{width:280px;}
.style{height:200px; background-color:#f8f8f8;}
.nba .box{width:326px;}

.header{
	padding: 20px 0;
}
.search{
	border: 1px solid #ddd;
}
.search .demu{
	position:relative;
	display: block;
	padding: 8px;
}
.search .demu:hover .sub{
	display: block;
}
.search .sub{
	position: absolute;
	display: none;
	left:-1px;
	top: 100%;
	width:100%;
	text-align: center;
	background-color: #f8f8f8;
	border:2px solid #ddd;
	border-top:none;
}
.search .sub a{
	display: block;
	margin:4px 0;
}
.search input[type=text]{
    padding: 5px;
    border: none;
    line-height: 26px;
}

</style>
</head>
<body>
	<div class="layout">
		<div class="header clear">
			<a href="#" class="logo fl">
				<img src="img/qqlogo.png" alt="">
			</a>
			<div class="search fl">
				<form action="" class="clear">
					<div href="#" class="demu fl">
						<span>网页</span>
						<div class="sub">
							<a href="#">新闻</a>
							<a href="#">新闻</a>
							<a href="#">新闻</a>
							<a href="#">新闻</a>
							<a href="#">新闻</a>
							<a href="#">新闻</a>
							<a href="#">新闻</a>
						</div>
					</div>
					<input type="text" class="fl">
					<a href="#" class="soso"></a>
					<button type="submit">搜索</button>
				</form>
			</div>
			<div class="login fr">
				
			</div>
		</div>
		<div class="nav mt10 tc">导航占位</div>
		<div class="main">
			<div class="add mt10 clear">
				<a href="#" class="fl"><img src="img/add-1.png"></a>
				<a href="#" class="fr"><img src="img/add-2.png" alt=""></a>
			</div>

			<div class="news mt10 clear">
				<div class="fl clear">
					<div class="lbox style fl"></div>
					<div class="lbox style fr"></div>
				</div>
				<div class="fr">
					<div class="rbox style"></div>
				</div>
			</div>

			<div class="digital mt10 clear">
				<div class="fl clear">
					<div class="lbox style fl"></div>
					<div class="lbox style fr"></div>
				</div>
				<div class="fr">
					<div class="rbox style"></div>
				</div>
			</div>

			<div class="add mt10 clear">
				<a href="#" class="fl"><img src="img/add-1.png"></a>
				<a href="#" class="fr"><img src="img/add-2.png" alt=""></a>
			</div>

			<div class="nba mt10 clear">
				<div class="box fl style mr10"></div>
				<div class="box fl style mr10"></div>
				<div class="box fl style"></div>
			</div>
		</div>
	</div>
</body>
</html>
